<template>
  <div class="head">
    <div class="nav">
      <div class="leftLabel">
        <i class="el-icon-video-camera-solid"></i> 让协作更透明高效！
      </div>
      <div></div>
      <div class="rightLabel">
        <el-dropdown @command="handleCommand" size="medium" placement="bottom">
          <span class="el-dropdown-link">
            <i class="el-icon-menu"></i>

            <span v-if="user">{{user}}</span>
            <span v-else>{{namer}}</span>

            <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="personal">个人资料</el-dropdown-item>
            <el-dropdown-item command="safety">安全中心</el-dropdown-item>
            <el-dropdown-item command="loggedOut">退出登陆</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    user: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      namer: "刘亮1",
      // user: "",
      // name: ""
    };
  },
  methods: {
    handleCommand(command) {
      var that = this;

      if (command === "loggedOut") {
        that.$router.push("login");
      } else if (command === "safety") {
        console.log(that.user);
        that.$router.push({
          name: "safety",
          query: {
            use: that.user,
          },
        });
      } else if (command === "personal") {
        that.$router.push({
          name: "personal",
          query: {
            use: that.user,
          },
        });
      }
      // this.$message("click on item " + command);
    },
  },

  mounted() {
    this.namer = localStorage.getItem("user");
    // console.log(this.user);
    // if (!this.user) {
    //   console.log("111");
    //   let name = localStorage.getItem(user);
    //   this.name = name;
    //   console.log("222");
    // }
  },
};
</script>


<style lang="scss">
.head {
  width: 100%;
  .leftLabel
  {
    width: 300px;
    position: relative;
    animation: myliang 50s 2;
    // animation-direction: reverse;
    // -webkit-animation: myliang 5s infinite;
    // animation-iteration-count: 1;;

  }
  @keyframes myliang {
    0% {left: 0px;}
    25% {color: #6699FF;}
    50% {left: calc(100% - 400px);color:yellowgreen;}
    75% {color:#6699FF;}
    100% {left: 0px;}
    
  }

}
.el-dropdown-link {
  cursor: pointer;
  color: #c2c2c4;
  font-size: 20px;
  letter-spacing: 1px;
}
.el-icon-arrow-down {
  font-size: 16px;
}
.nav {
  width: 100%;
  height: 60px;
  background: #000000;
  text-align: center;
  display: flex;
  justify-content: space-between;
  .leftLabel {
    letter-spacing: 5px;
    font-weight: bold;
    width: 300px;
    height: 100%;
    line-height: 60px;
    color: #c2c2c4;
    font-size: 20px;
    font-family: "Gothic Medium", "Arial Narrow", Arial, sans-serif;
  }
  .rightLabel {
    margin-right: 30px;
    width: 100px;
    height: 50px;
    background: #000000;
    display: flex;
    justify-content: center;
    line-height: 50px;
    font-size: 16px;
    .el-select {
      .el-input {
        .el-input__inner {
          outline: none;
          border: none;
          background: yellow;
        }
      }
    }
  }
}
</style>











